<!--
    demo for Android 写在前面
    Android 和 iOS 是否要分开？
        demo是为了更方便让你接入，由于苹果爸爸并未开发WebRTC在除了Safari以外浏览器的权限，
        因此Android与iOS的技术方案是有差异的，考虑到这一点，为了让在开发阶段更方便去理解以便
        实现千差万别的业务需求，我们将iOS与Android分开，当你看完并完全理解这两者的差异，集成到同一个页面
        也是一种可选方案，愿佛祖保佑。:)

    阅读代码不是一件轻松的事，但也请花些时间看看注释，避免踩坑

    如果你使用的是mvvm，如果可能的话，尽量让webrtc部分隔离开，否则请一定注意：
    遇到黑屏问题的时候，确认一下，是不是因为dom tree 重绘引起的video失去了对stream的绑定关系
    此外，我很贴心的把webrtc的Api地址也留下啦：↓ ↓ ↓

    https://sxb.qcloud.com/webrtcapi/webrtc/api.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抓娃娃</title>
    <link href="dist/css/style.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!--demo : 使用vue -->
    <script src="../libs/vue.js"></script>
    <!-- demo : rem自适应代码 -->
    <script src="../libs/amfe-flexible.js"></script>
    <script>
    // demo 禁用 android 长按弹出菜单
    window.addEventListener('contextmenu', function(e){
        e.preventDefault();
    });
    </script>
</head>
<body>

<!-- root -->
<div id="app-main">
    <div id="content-box"  style="display:none">

        <!-- 测试代码：提供输入房间号进房间的窗口 ，请忽略 Start-->
        <div v-if="createRoomModal"  class="container modal">
            <div class="overlay" ></div>
            <div class="gvc-dialog" role="alertdialog" >
                <div class="gvc-dialog-hd">
                    <strong>进入房间</strong>
                </div>
                <div class="gvc-dialog-bd">
                    <div class="creating-wrap">
                        <span>房间ID</span>
                        <input type="text" class="gvc-input-text" placeholder="请输入房间ID" v-model="modalForm.roomnum" value="" autofocus="">
                    </div>
                </div>
                <div class="gvc-dialog-ft-btn-wrap">
                    <button class="gvc-btn confirm" v-on:click="createRoom">确定</button>
                </div>
            </div>
        </div>
        <!-- 测试代码：提供输入房间号进房间的窗口 ，请忽略 END -->

        <!-- 房间列表 Start -->
        <div v-if="view == 1"  class="container">
            <div class="rooms-wrap">
                <ul class="rooms-list">
                    <li v-for="(item,i) in roomList" :class="roomnum == item.id ? 'room-item selected' : 'room-item' " :data-roomnum="item.id"  v-on:click="chooseRoom(item)">
                        <p class="room-id">
                            <span class="label-txt">测试娃娃机 roomId: {{ item.id }}</span>
                        </p>
                    </li>
                    <li v-if="roomList && roomList.length > 0 ">
                        <div class="gvc-dialog-ft-btn-wrap">
                            <button class="gvc-btn confirm" v-on:click="joinRoom">进入房间</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 房间列表  End  -->

        <!-- 视频流  Start -->
        <div v-if="view == 3"  class="container">
            <div class="main-area">
                <div class="panel">
                    <div class="room-num" >roomid:{{ roomnum }}</div>
                    <div class="video-panel">
                        <div class='video-container fluid rotate'>
                            <!-- webrtc 是使用video来播放视频流的
                                以下几个问题要特别注意：
                                    1.video 必须包含playsinline / muted / autoplay 3个属性并置为true
                                    2.如果domtree被重绘，video会丢失对视频流的绑定关系，此时一定要重新将视频流stream赋予video.srcObject
                                        document.querySelector("#videoId").srcObject = stream (这里的stream 在 WebRTCAPI 的onRemoteStreamAdd 方法中返回，记得把引用存下来)
                                    3.
                            -->
                            <template v-for="item in video_list">
                            <div :class="(item.first ? 'flex-item first ' : 'flex-item ') + ( item.openId ==roomInfo.front ? 'main-video' : 'sub-video')" :data-id="item.videoId">
                                <video @click="toggleClass" :id="item.videoId" muted  playsinline="playsinline" muted  class="video-item" autoplay="autoplay" data-videotype="remote"></video>
                            </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频流 End -->

        <!-- 开始游戏按钮  Start  -->
        <div v-if="this.catcher.state != 1 && view == 3" class="game-ready">
            <div class="ready-text" v-show="catcher.waitNumber * 1">当前排队人数：{{ catcher.waitNumber }}</div>
            <div class="start-game-btn" v-if="!alreadySendQueueRequest" @click="startQueue" @touchstart="pressed.start = true;" @touchend="pressed.start = false;"
                v-bind:class="{pressed: pressed.start}"></div>
        </div>
        <!-- 开始游戏按钮  End  -->


        <!-- 游戏操控 Start  -->
        <div v-if="view == 3 && this.catcher.state == 1" class="game-playing" >
            <!-- 切换摄像头 Start -->
            <div class="toggle-box">
                <div class="toggle-video"
                    @click="toggleClass"
                    @touchstart="pressed.togger = true;"
                    @touchend="pressed.togger = false;"
                    v-bind:class="{pressed: pressed.togger}">
                </div>
            </div>
            <!-- 切换摄像头 End -->
            <div class="flex-box">
                    <!-- 操控 Start -->
                <div class="touch-box" @touchend="touch(Directive.CTL_STOP)">
                    <a class="touch-left"
                        @touchstart="pressed.left = true; touch(Directive.CTL_LEFT_START)"
                        @touchend="pressed.left = false; "
                        v-bind:class="{pressed: pressed.left}"></a>
                    <a class="touch-up"
                        @touchstart="pressed.up = true; touch(Directive.CTL_FORWARD_START)"
                        @touchend="pressed.up = false; "
                        v-bind:class="{pressed: pressed.up}"></a>
                    <a class="touch-right"
                        @touchstart="pressed.right = true; touch(Directive.CTL_RIGHT_START)"
                        @touchend="pressed.right = false; "
                        v-bind:class="{pressed: pressed.right}"></a>
                    <a class="touch-down"
                        @touchstart="pressed.down = true; touch(Directive.CTL_BACKWARD_START)"
                        @touchend="pressed.down = false; "
                        v-bind:class="{ pressed: pressed.down }"></a>
                </div>
                <div class="flex"></div>
                <div class="catcher-box">
                    <div class="time-text" v-text="remainTime"></div>
                    <div class="catcher-btn"
                        @click="catcherDoCatch"
                        @touchstart="pressed.catcher = true;"
                        @touchend="pressed.catcher = false;"
                        v-bind:class="{ pressed: pressed.catcher }"></div>
                </div>
                <!-- 操控 End -->
            </div>
        </div>
        <!-- 游戏结果 Start -->
        <div class="game-result-box" v-show="showWin || showLose" @click.stop="hideResultPanel">
            <div class="game-result">
                <div class="game-result-text">

                    <div class="game-win-text" v-show="showWin"></div>
                    <div class="game-lose-text" v-show="showLose"></div>
                </div>
            </div>
        </div>
        <!-- 游戏结果 End -->
    </div>

    <!-- demo 的 toast 提示组件 START -->
    <vue-toastr ref="toastr"></vue-toastr>
    <!-- demo 的 toast 提示组件 END -->
</div>
<!-- store 本地存储  -->
<script src="../libs/store.min.js"></script>
<script src="../libs/lodash.min.js"></script>
<!-- toastr 组件 -->
<script src="../libs/toastr.min.js"></script>
<!-- axios : ajax -->
<script src="../libs/axios.min.js"></script>
<!-- WebRTCAPI : 强烈建议你这样引用，方便我们的维护 -->
<script src="https://sqimg.qq.com/expert_qq/webrtc/1.2/WebRTCAPI.min.js"></script>
<!-- 不使用RTMP拉流播放的不需要引用以下2个js -->
<!-- md5： 用于计算rtmp直播播放地址 -->
<script src="../libs/md5.min.js"></script>
<!-- TCPLAYER 用于播放 / Android 在TBS 浏览器中直播流会全屏展示，这个暂时无解 -->
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
<!-- TXWawaPlayer 娃娃机SDK ，这是我们的重点 -->
<!-- TXWawaPlayer : 强烈建议你这样引用，方便我们的维护 -->
<script src="https://sqimg.qq.com/expert_qq/wawaji/1.5/TXWawaPlayer.min.js"></script>
<!-- 业务模块 -->
<script src="assets/js/mobile.js?v=4"></script>
<!--  -->
<script src="../libs/jquery.min.js"></script>
<script>
$("#content-box").show();

// 以下方法仅供参考
// 我们提供以下接口方便你根据业务情况
// 来确定是否需要进行特殊的提示
var isMobile = {
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent);
    },
    Android: function() {
        return /Android/i.test(navigator.userAgent);
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent);
    },
    iOS: function() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};
if (isMobile.iOS()) {
    window.location.href = "../iOS/index.html"
}

</script>
</body>
</html>
